@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    --color-primary: #5154E0;
    --color-bg-page-nav: #2A3A5D;
    --color-background: #FFFFFF;
    --window-header-height: 2.5rem;
    --page-nav-width: 4rem;
}

body, html {
    background-color: var(--color-background);
    font-size: 14px;
}

@font-face {
    font-family: AlibabaPuHuiTi;
    src: url('./assets/fonts/AlibabaPuHuiTi-3-55-Regular.ttf') format('truetype');
}

/////////// layout start ///////////

.page-container {
    height: calc(100vh - var(--window-header-height));
    width: 100vw;
}

.page-narrow-container {
    max-width: 100rem;
    margin: 0 auto;
}

.window-header {
    -webkit-user-select: none;

    .window-header-title {
        -webkit-app-region: drag;
    }
}

/////////// layout end ///////////

/////////// global start ///////////

.text-link {
    color: #007bff;
    cursor: pointer;
}

.hover\:text-primary {
    &:hover {
        color: var(--color-primary);
    }
}

.bg-primary {
    background-color: var(--color-primary);
}

.text-primary {
    color: var(--color-primary);
}

.debug {
    border: 1px solid red;
}

/////////// global end ///////////


/////////// arco start ///////////
.arco-btn, .arco-input-wrapper {
    border-radius: 0.5rem;
}

.arco-tabs-tab-title {
    &:before {
        border-radius: 0.5rem !important;
    }
}

.arco-modal-confirm {
    .arco-modal-header {
        border-bottom: none;
    }

    .arco-modal-footer {
        border-top: none;
    }
}

/////////// arco end ///////////

/////////// module run start ///////////
.text-module {
    color: #562986;
}

.text-extend {
    color: var(--color-primary);
}

.text-pip {
    color: #FB9916;
}

/////////// module run end ///////////
